<template>
    <div>
        <div class="table">
            <div class="app-container">
                <div class="table_layout">
                    <el-table :data="tableItems" border style="width: 100% ;" >
                        <el-table-column prop="name" class="el-col-4" label="名称" />
                        <el-table-column label="优惠券类型" class="el-col-4">
                            <template #default="scope">
                                <div>{{ types[scope.row.type].coupon }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="可用商品" class="el-col-4">
                            <template #default="scope">
                                <div>{{ types[scope.row.useType].goods }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="使用门槛" class="el-col-4">
                            <template #default="scope">
                                <div>满{{ scope.row.minPoint }}元可用</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="面值" class="el-col-4">
                            <template #default="scope">
                                <div>{{ Number(scope.row.amount).toFixed() }}元</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" class="el-col-4">
                            <template #default="scope">
                                <div>已过期</div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-table :data="tableItems" border style="width: 100%;margin-bottom: 30px;">
                        <el-table-column label="有效期" class="el-col-4">
                            <template #default="scope">
                                <div>{{ scope.row.enableTime
                                    ? dayjs(scope.row.enableTime
                                    ).format('YYYY-MM-DD') : '' }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="publishCount" class="el-col-4" label="总发行量" />
                        <el-table-column prop="receiveCount" class="el-col-4" label="已领取" />
                        <el-table-column label="待领取" class="el-col-4">
                            <template #default="scope">
                                <div>{{ scope.row.publishCount - scope.row.receiveCount }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="useCount" class="el-col-4" label="已使用" />
                        <el-table-column label="待使用" class="el-col-4">
                            <template #default="scope">
                                <div>{{ scope.row.publishCount - scope.row.useCount }}</div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-card class="box-card">
                    <div class="card-header">
                        <div>
                            <el-icon style="margin-top">
                                <Search />
                            </el-icon>
                            <span>筛选搜索</span>
                        </div>
                        <div>
                            <el-button class="button" @click="cleardata">重置</el-button>
                            <el-button class="button" type="primary" @click="selectData">查询搜索</el-button>
                        </div>
                    </div>
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item class="form-item" label="使用状态：">
                            <el-select class="m-2" v-model="selectValue" placeholder="全部">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item class="form-item" label="订单编号：">
                            <el-input v-model="inputVal" placeholder="订单编号" />
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-table :data="tableData" border style="width: 100%; margin-top: 30px;" :key="tablekey">
                    <el-table-column prop="couponCode" width="160" label="优惠码" />
                    <el-table-column prop="memberNickname" width="140" label="领取会员" />
                    <el-table-column label="领取方式" width="100">
                        <template #default>
                            <div>主动领取</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="领取时间" width="160">
                        <template #default="scope">
                            <div>{{ scope.row.createTime
                                ? dayjs(scope.row.createTime
                                ).format('YYYY-MM-DD') : '' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="当前状态" width="140">
                        <template #default>
                            <div>已过期</div>
                        </template>
                    </el-table-column>


                    <el-table-column label="使用时间" width="160">
                        <template #default="scope">
                            <div>{{ scope.row.useTime
                                ? dayjs(scope.row.createTime
                                ).format('YYYY-MM-DD') : '' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单编号">
                        <template #default="scope">
                            <div>{{ scope.row.orderId === null ? "N/A" : scope.row.orderId }}</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-pagination style="float: right;" v-model:current-page="pagination.pageNum"
            v-model:page-size="pagination.pageSize" background :page-sizes="[1, 5, 10, 20]"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>


<script setup lang="ts">
import { ref } from "vue"
import { Tickets, Search } from '@element-plus/icons-vue'
import useTable from '../../hooks/useTables'
import * as api from '../../request/api'
import type { Ref } from "vue"
import { useRouter, useRoute } from 'vue-router'
import dayjs from "dayjs"


let selectValue = ref('')
let inputVal = ref('')
let route = useRoute()


// 接口
interface User {
    date: string
    name: string
    address: string
}

let tableItems = ref([]) as Ref<any[]>


(async function () {
    tableItems.value[0] = await api.flash.getCoupon(Number(route.query.id))
    console.log(tableItems.value);


})()
console.log();


let options = [
    {
        value: "未使用",
        label: '未使用'
    }, {
        value: "已使用",
        label: '已使用'
    }, {
        value: "已过期",
        label: '已过期'
    }
]


let types = [
    {
        coupon: '全场赠券',
        goods: '全场通用',
        terrace: "全平台"
    }, {
        coupon: '会员赠券',
        goods: '指定分类',
        terrace: "移动平台"
    }, {
        coupon: '购物赠券',
        goods: '指定商品',
        terrace: "PC平台"
    }, {
        coupon: '注册赠券'
    }
]
// 分页器


let tableData: any, pagination: any, handleSizeChange: any, handleCurrentChange: any
function fen() {
    let obj: any = useTable(api.admin.queryCouponData, {
        couponId: Number(route.query.id),
        useStatus: options.findIndex(item => {
            return item.label === selectValue.value
        }) === -1 ? Number('') : options.findIndex(item => {
            return item.label === selectValue.value
        }),
        orderSn: inputVal.value
    }
    )
    tableData = obj.tableData
    pagination = obj.pagination
    handleSizeChange = obj.handleSizeChange
    handleCurrentChange = obj.handleCurrentChange
    console.log(tableData);
}
fen()




// 清空
let cleardata = () => {
    inputVal.value = ''
    selectValue.value = ''
}
let tablekey = ref(1)
// // 查询
let selectData = () => {
    fen()
    tablekey.value++
}
</script>




<style scoped>
.app-container {
    width: 80%;
    margin: 20px auto;
}


.el-col-4 {
    width: 16.66%;

}


.card {
    margin-top: 60px;
    margin-bottom: 30px;
}


.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

:deep .cell {
    text-align: center;
}


.form-item {
    margin: 30px 0 30px 50px;
}
</style>